<template>
  <div>
    <!--  显示当前学生这一学年的学费，如果已经缴费就显示：当前学年学费已缴清，如果没有缴清就显示表格待操作-->
    <el-tag type="info">已缴清记录如下:</el-tag>

    <div v-for="(item,index) in itemList">
      <div align="left" style="padding-top: 30px"><el-tag type="success"><i class="el-icon-success"></i> 已缴清记录{{index+1}}:</el-tag></div>
      <el-row style="background-color: aliceblue">
        <el-col :span="12"><div class="grid-content bg-purple">
          <div align="left"><i class="el-icon-menu"></i>学费类型：<el-tag style="font-size: larger">{{item.type}}</el-tag></div>
          <div align="left"><i class="el-icon-tickets"></i>减免类型：<el-tag style="font-size: larger">{{ item.breakType }}</el-tag></div>
          <div style="padding-top: 10px" align="left"><el-tag>合计：{{ item.total }} 元</el-tag></div>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <div ><el-button style="height: 100px;width: 175px;font-size: 20px" @click="feeInfo(item.feeId)" type="primary" plain>查询详情</el-button></div>
        </div></el-col>
      </el-row>
    </div>

<!--    <div align="left" style="padding-top: 30px"><el-tag type="success"><i class="el-icon-success"></i> 已缴清记录2:</el-tag></div>-->
<!--    <el-row style="background-color: aliceblue">-->
<!--      <el-col :span="12"><div class="grid-content bg-purple">-->
<!--        <div align="left"><i class="el-icon-menu"></i>学费类型：<el-tag style="font-size: larger">2016级机电系普通班学费（2020-2021）</el-tag></div>-->
<!--        <div align="left"><i class="el-icon-tickets"></i>减免类型：<el-tag style="font-size: larger">贫困生</el-tag></div>-->
<!--        <div style="padding-top: 10px" align="left"><el-tag>合计：{{ totalFee }} 元</el-tag></div>-->
<!--      </div></el-col>-->
<!--      <el-col :span="12"><div class="grid-content bg-purple-light">-->
<!--        <div ><el-button style="height: 100px;width: 175px;font-size: 20px" @click="payFee(feeId)" type="primary" plain>查询详情</el-button></div>-->
<!--      </div></el-col>-->
<!--    </el-row>-->


    <!--  您还有其他待交费用，可到缴费查询-》未缴、未缴清费用查询查看并缴纳（提示）-->
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "feeNeedPaySearch.vue",
  data(){
    return{
      totalFee:4000,
      itemList:[]
    }
  },
  mounted() {
    this.getFeePaid()
  },
  methods:{
    getFeePaid(){
      axios.get(`/api/info/getPaidInfo?studentId=${localStorage.getItem("studentId")}`).then((res)=>{
        this.itemList = res.data.data
        console.log( res.data.data)
      }).catch((res)=>{
        console.log(res)
      })
    },
    feeInfo(id){
      //当前费用id存在父组件内
      console.log('id',id)
      this.$parent.$parent.$parent.$parent.currentFeeId=id
      this.$parent.$parent.$parent.$parent.currentPage='feePayment'
    }
  }
}
</script>

<style scoped>
.feeTable{
  width: 75%;
  background-color: #B3C0D1;
}
</style>
